<template>
  <el-select v-bind="$attrs" v-model="model" class="w100 w-max100">
    <template v-for="(item, index) in options">
      <el-option
        :key="item[valueKey]"
        v-if="typeof item === 'object'"
        :value="item[valueKey]"
        :label="item[labelKey]"
        :disabled="!!item.disabled" />
      <el-option :key="index" :value="item" :label="item" v-else />
    </template>
  </el-select>
</template>

<script>
  export default {
    name: 'bSelect',
    props: {
      formValue: {
        type: [String, Number, Array]
      },
      field: {
        type: String,
        default: ''
      }
    },
    computed: {
      model: {
        get() {
          return this.formValue
        },
        set(val) {
          this.$emit('changeData', { key: this.field, value: val, event: 'change' })
        }
      },
      options() {
        return this.$attrs.options || []
      },
      valueKey() {
        return this.$attrs.valueKey || this.$attrs['value-key'] || 'value'
      },
      labelKey() {
        return this.$attrs.labelKey || this.$attrs['label-key'] || 'label'
      }
    }
  }
</script>

<style scoped></style>
